<script setup>
const props = defineProps({
  theme: {
    type: String,
    default: ''
  },
  block: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits(['click']);
const theme = computed(() => {
  const btnClass = []
  switch (props.theme) {
    case 'warn':
      btnClass.push('warn');
      break
    default:
      break;
  }
  if (props.block) {
    btnClass.push('block');
  }
  return btnClass
});
// console.log(props)
</script>
<template>
  <div class="button" :class="theme" @click="() => emit('click')">
    <span class="no-select">
      <slot></slot>
    </span>
  </div>
</template>
<style scoped lang="less">
.button {
  width: 100px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  color: #0f0f0f;
  background-color: #ffffff;
  transition: border-color 0.25s;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  text-align: center;
  cursor: default;

  &.block {
    width: 100%;
  }
}

.warn {
  background-color: #fe4242;
  color: #ffffff;
  border-color: transparent;
}
</style>
